<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>响应式布局</title>
    <!-- 就近原则 -->
    <!-- animate.css 动画库 -->
    <link rel="stylesheet" href="assets/css/animate.min.css">
    <!-- 引入bootstrap文件 link默认解析css的 -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
    <!-- 重置样式 解析less需要加/less-->
    <link rel="stylesheet/less" href="assets/css/reset.less" />
    <!-- 首页样式 -->
    <link rel="stylesheet/less" href="assets/css/index.less" />

  </head>
  <body>
    <!-- 头部 -->
    <header class="navbar navbar-default">
      <!-- container固定的 container-filud 100%-->
      <div class="container">
        <!-- logo元素 -->
        <div class="navbar-header">
          <button
            type="button"
            class="navbar-toggle collapsed"
            data-toggle="collapse"
            data-target="#bs-example-navbar-collapse-1"
            aria-expanded="false"
          >
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand logo wow  bounceInLeft" href="#">Spirit</a>
        </div>                                                  
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <!-- javascript:void(0)点击后返回值为0 跳转空值 -->
            <li class="wow bounceInDown" data-wow-delay="100ms"><a href="#banner">HOME</a></li>
            <li class="wow bounceInDown" data-wow-delay="200ms"><a href="#about">About</a></li>
            <li class="wow bounceInDown" data-wow-delay="300ms"><a href="#services">SERVICES</a></li>
            <li class="wow bounceInDown" data-wow-delay="400ms"><a href="javascript:void(0)">portfolio</a></li>
            <li class="wow bounceInDown" data-wow-delay="500ms"><a href="#tesimonials">testimonials</a></li>
            <li class="wow bounceInDown" data-wow-delay="600ms"><a href="#contact">CONTACT</a></li>
        </div>
        <!-- /.navbar-collapse -->
      </div>
      <!-- /.container-fluid -->
    </header>
    <!-- 中间部分 -->
    <div class="banner" id="banner">
        <div class="title wow bounceInDown" data-wow-delay="100ms">
          wELCOME on <span>spirit8</span>
        </div>
        <div class="desc wow bounceInDown" data-wow-delay="200ms">
          We are a digital agency with <span>years of experience</span> and with <span>extraordinary people</span>
        </div>
        <a class="more wow bounceInDown" data-wow-delay="300ms" href="javascript:void(0)">⬇</a>
    </div>
    <!-- 电视部分 使用锚点完成跳转位置 -->
    <div class="about" id="about">
      <!-- 居中盒子 -->
      <div class="container">
        <div class="left wow bounceInDown" data-wow-delay="100ms">
          <img src="./assets/images/s1_03.png" alt="">
        </div>
        <div class="right">
          <div class="title">
            <div class="top wow bounceInDown" data-wow-delay="100ms">About US</div>
            <div class="bottom wow bounceInDown" data-wow-delay="200ms"><span>SOME</span> WORDS <span>ABOUT US</span></div>
          </div>
          <div class="content wow bounceInDown" data-wow-delay="100ms">
            We love building and rebuilding brands through our  specific skills. Using colour, fonts, and illustration, we brand companies in a way they will never forget.
          </div>
          <ul class="list">
            <li class="wow bounceInDown" data-wow-delay="100ms">
              <span class="glyphicon glyphicon-record" aria-hidden="true"></span><span>Mission -</span><span>deliver uniqueness and quality</span>
            </li>
            <li class="wow bounceInDown" data-wow-delay="200ms">
              <span class="glyphicon glyphicon-record" aria-hidden="true"></span><span>Skills -</span><span>Delivering fast and excellent results</span>
            </li>
            <li class="wow bounceInDown" data-wow-delay="300ms">
              <span class="glyphicon glyphicon-record" aria-hidden="true"></span><span>Clients -</span><span>Satisfied clients thanks to our experience  </span>
            </li>
          </ul>
          <div class="more wow bounceInDown" data-wow-delay="400ms">          
            <span class="glyphicon glyphicon-lock" aria-hidden="true"></span><span>Browse our work</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 第4部分 -->
    <div class="team">
      <div class="container">
        <!-- 头部 -->
        <div class="title wow bounceInDown" data-wow-delay="100ms">MEET <span>OUR TEAM</span></div>
        <!-- 中间列表 -->
        <div class="list">
          <div class="item">
            <div class="avatar wow bounceInDown" data-wow-delay="200ms">
              <img src="./assets/images/cover.png" alt="" />   
            </div>
            <!-- 列表盒子其中一个盒子 -->
            <div class="box">
              <div class="nickname wow bounceInDown" data-wow-delay="200ms">Jason Statham</div>
              <div class="job wow bounceInDown" data-wow-delay="300ms">No English</div>
              <div class="content wow bounceInDown" data-wow-delay="400ms">Do not seek to change what has
                come before. Seek to create that which has not.</div>
            </div>
          </div>
          <div class="item">
            <div class="avatar wow bounceInDown" data-wow-delay="200ms">
              <img src="./assets/images/cover.png" alt="" />   
            </div>
            <!-- 列表盒子其中一个盒子 -->
            <div class="box">
              <div class="nickname wow bounceInDown" data-wow-delay="200ms">Jason Statham</div>
              <div class="job wow bounceInDown" data-wow-delay="300ms">No English</div>
              <div class="content wow bounceInDown" data-wow-delay="400ms">Do not seek to change what has
                come before. Seek to create that which has not.</div>
            </div>
          </div>
          <div class="item">
            <div class="avatar wow bounceInDown" data-wow-delay="200ms">
              <img src="./assets/images/cover.png" alt="" />   
            </div>
            <!-- 列表盒子其中一个盒子 -->
            <div class="box">
              <div class="nickname wow bounceInDown" data-wow-delay="200ms">Jason Statham</div>
              <div class="job wow bounceInDown" data-wow-delay="300ms">No English</div>
              <div class="content wow bounceInDown" data-wow-delay="400ms">Do not seek to change what has
                come before. Seek to create that which has not.</div>
            </div>
          </div>
          <div class="item">
            <div class="avatar wow bounceInDown" data-wow-delay="200ms">
              <img src="./assets/images/cover.png" alt="" />   
            </div>
            <!-- 列表盒子其中一个盒子 -->
            <div class="box">
              <div class="nickname wow bounceInDown" data-wow-delay="200ms">Jason Statham</div>
              <div class="job wow bounceInDown" data-wow-delay="300ms">No English</div>
              <div class="content wow bounceInDown" data-wow-delay="400ms">Do not seek to change what has
                come before. Seek to create that which has not.</div>
            </div>
          </div>
        </div>
        <!-- 下面小点 -->
        <div class="more">
          <span class="wow fadeInRight" data-wow-delay="100ms"></span>
          <span class="wow fadeInRight" data-wow-delay="200ms"></span>
          <span class="wow fadeInRight" data-wow-delay="300ms"></span>
        </div>
      </div>
    </div>
    <!-- 第五部分 -->
    <div class="services" id="services">
      <div class="container">
        <!-- 头部 -->
        <div class="title wow bounceInDown" data-wow-delay="100ms">take a look at<span> our services</span></div>
        <!-- 段落 -->
        <div class="desc wow bounceInDown" data-wow-delay="200ms">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum 
          et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, 
          very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
        </div>
        <!-- 中间列表 -->
        <div class="list">
          <div class="item">
            <div class="avatar wow bounceInDown" data-wow-delay="200ms">
              <img src="./assets/images/01.png" alt="" />   
            </div>
            <!-- 列表盒子其中一个盒子 -->
            <div class="box">
              <div class="nickname wow bounceInDown" data-wow-delay="200ms">Web design</div>
              <div class="content wow bounceInDown" data-wow-delay="300ms">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..",
                 comes from a line in section 1.10.32.</div>
            </div>
          </div>
          <div class="item">
            <div class="avatar wow bounceInDown" data-wow-delay="200ms">
              <img src="./assets/images/02.png" alt="" />   
            </div>
            <!-- 列表盒子其中一个盒子 -->
            <div class="box">
              <div class="nickname wow bounceInDown" data-wow-delay="200ms">Mobile apps</div>
              <div class="content wow bounceInDown" data-wow-delay="300ms">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..",
                comes from a line in section 1.10.32.</div>
            </div>
          </div>
          <div class="item">
            <div class="avatar wow bounceInDown" data-wow-delay="200ms">
              <img src="./assets/images/03.png" alt="" />   
            </div>
            <!-- 列表盒子其中一个盒子 -->
            <div class="box">
              <div class="nickname wow bounceInDown" data-wow-delay="200ms">PHOTOGRAPHY</div>
              <div class="content wow bounceInDown" data-wow-delay="300ms">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..",
                comes from a line in section 1.10.32.</div>
            </div>
          </div>
          <div class="item">
            <div class="avatar wow bounceInDown" data-wow-delay="200ms">
              <img src="./assets/images/04.png" alt="" />   
            </div>
            <!-- 列表盒子其中一个盒子 -->
            <div class="box">
              <div class="nickname wow bounceInDown" data-wow-delay="200ms">marketing</div>
              <div class="content wow bounceInDown" data-wow-delay="300ms">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..",
                comes from a line in section 1.10.32.</div>
            </div>
          </div>
        </div>           
     </div>
  </div>
    </div>
    <!-- 第六部分 -->
    <div class="team2">
      <div class="container">
        <!-- 头部 -->
        <div class="title wow bounceInDown" data-wow-delay="100ms">our clients’ <span>testimonials</span></div>
        <!-- 中间列表 -->
        <div class="list">
          
          <div class="item wow flipInY" data-wow-delay="100ms">
            <img src="./assets/images/Layer 64.png" alt="">
          </div>
          <div class="item wow flipInY" data-wow-delay="200ms">
            <img src="./assets/images/Layer 65.png" alt="">
          </div>
          <div class="item wow flipInY" data-wow-delay="300ms">
            <img src="./assets/images/Layer 67.png" alt="">
          </div>
          <div class="item wow flipInY" data-wow-delay="400ms">
            <img src="./assets/images/Layer 68.png" alt="">
          </div>
          <div class="item wow flipInY" data-wow-delay="500ms">
            <img src="./assets/images/Layer 69.png" alt="">
          </div>
        </div>
        <!-- 下面小点 -->
        <div class="more">
          <span class="wow fadeInRight" data-wow-delay="100ms"></span>
          <span class="wow fadeInRight" data-wow-delay="200ms"></span>
          <span class="wow fadeInRight" data-wow-delay="300ms"></span>
        </div>
      </div>
    </div>
    <!-- 第7部分 -->
     <!-- 外面大盒子 -->
    <div class="work">
      <!-- 内部居中 -->
       <div class="container">
          <!-- 头部 -->
          <div class="title wow bounceInDown" data-wow-delay="100ms">take a look at<span> our work</span></div>
          <!-- 段落 -->
          <div class="desc wow bounceInDown" data-wow-delay="200ms">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" 
            (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, 
            very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", 
            comes from a line in section 1.10.32.</div>
            <!-- 装导航和 列表的盒子 -->
             <div class="box">
                <!-- 导航 -->
                 <div class="top">
                    <!-- 左 -->
                      <div class="left wow bounceInDown" data-wow-delay="100ms">Filter by type</div>
                    <!-- 右 -->
                     <div class="right">
                          <a class="wow slideInLeft" data-wow-delay="100ms"">All</a>
                          <a class="wow slideInLeft" data-wow-delay="200ms">Web design</a>
                          <a class="wow slideInLeft" data-wow-delay="300ms">Mobile design</a>
                          <a class="wow slideInLeft" data-wow-delay="400ms">Photograpy</a>
                     </div>
                     <select class="menu">
                        <option href="javascript:void(0)">All</option>
                        <option href="javascript:void(0)">Web design</option>
                        <option href="javascript:void(0)">Mobile design</option>
                        <option href="javascript:void(0)">Photograpy</option>
                     </select>
                 </div>
                 <!-- 列表 -->
                  <div class="list">

                      <div class="item">
                          <img src="./assets/images/img1_03.png" />
                          <!-- 当鼠标移动到图片时发生变化 -->
                          <div class="mask">
                              <div class="title1">Trend and fashion</div>
                              <div class="desc1">Website design</div>
                              <!-- 加好 -->
                              <span class="plus">+</span>
                          </div>
                      </div>
                      <div class="item">
                        <img src="./assets/images/img1_03.png" />
                        <!-- 当鼠标移动到图片时发生变化 -->
                        <div class="mask">
                            <div class="title1">Trend and fashion</div>
                            <div class="desc1">Website design</div>
                            <!-- 加好 -->
                            <span class="plus">+</span>
                        </div>
                    </div>
                          <div class="item">
                            <img src="./assets/images/img1_03.png" />
                            <!-- 当鼠标移动到图片时发生变化 -->
                            <div class="mask">
                                <div class="title1">Trend and fashion</div>
                                <div class="desc1">Website design</div>
                                <!-- 加好 -->
                                <span class="plus">+</span>
                            </div>
                        </div>
                        <div class="item">
                          <img src="./assets/images/img1_03.png" />
                          <!-- 当鼠标移动到图片时发生变化 -->
                          <div class="mask">
                              <div class="title1">Trend and fashion</div>
                              <div class="desc1">Website design</div>
                              <!-- 加好 -->
                              <span class="plus">+</span>
                          </div>
                      </div>
                          <div class="item">
                            <img src="./assets/images/img2_03.png" />
                            <!-- 当鼠标移动到图片时发生变化 -->
                            <div class="mask">
                                <div class="title1">Trend and fashion</div>
                                <div class="desc1">Website design</div>
                                <!-- 加好 -->
                                <span class="plus">+</span>
                            </div>
                        </div>
                        <div class="item">
                          <img src="./assets/images/img2_03.png" />
                          <!-- 当鼠标移动到图片时发生变化 -->
                          <div class="mask">
                              <div class="title1">Trend and fashion</div>
                              <div class="desc1">Website design</div>
                              <!-- 加好 -->
                              <span class="plus">+</span>
                          </div>
                      </div>
                        <div class="item">
                          <img src="./assets/images/img2_03.png" />
                          <!-- 当鼠标移动到图片时发生变化 -->
                          <div class="mask">
                              <div class="title1">Trend and fashion</div>
                              <div class="desc1">Website design</div>
                              <!-- 加好 -->
                              <span class="plus">+</span>
                          </div>
                      </div>
                            <div class="item">
                              <img src="./assets/images/img2_03.png" />
                              <!-- 当鼠标移动到图片时发生变化 -->
                              <div class="mask">
                                  <div class="title1">Trend and fashion</div>
                                  <div class="desc1">Website design</div>
                                  <!-- 加好 -->
                                  <span class="plus">+</span>
                              </div>
                          </div>
                          <div class="item">
                            <img src="./assets/images/img3_03.png" />
                            <!-- 当鼠标移动到图片时发生变化 -->
                            <div class="mask">
                                <div class="title1">Trend and fashion</div>
                                <div class="desc1">Website design</div>
                                <!-- 加好 -->
                                <span class="plus">+</span>
                            </div>
                        </div>
                      <div class="item">
                            <img src="./assets/images/img3_03.png" />
                            <!-- 当鼠标移动到图片时发生变化 -->
                            <div class="mask">
                                <div class="title1">Trend and fashion</div>
                                <div class="desc1">Website design</div>
                                <!-- 加好 -->
                                <span class="plus">+</span>
                            </div>
                        </div>
                        <div class="item">
                          <img src="./assets/images/img3_03.png" />
                          <!-- 当鼠标移动到图片时发生变化 -->
                          <div class="mask">
                              <div class="title1">Trend and fashion</div>
                              <div class="desc1">Website design</div>
                              <!-- 加好 -->
                              <span class="plus">+</span>
                          </div>
                      </div>
                      <div class="item">
                        <img src="./assets/images/img3_03.png" />
                        <!-- 当鼠标移动到图片时发生变化 -->
                        <div class="mask">
                            <div class="title1">Trend and fashion</div>
                            <div class="desc1">Website design</div>
                            <!-- 加好 -->
                            <span class="plus">+</span>
                        </div>
                    </div>
                  </div>
             </div>
       </div>
    </div>
    <!-- 第8部分 -->
    <div class="tesimonials" id="tesimonials">
      <div class="container">
        <!-- 头部 -->
        <div class="title wow bounceInDown" data-wow-delay="100ms">our clients’<span>testimonials</span></div>
        <!-- 中间列表 -->
        <div class="desc wow bounceInDown" data-wow-delay="200ms">This book is a treatise on the theory of ethics, 
          very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", 
          comes from a line in section 1.10.32.
        </div> 
        <!-- 小段落 -->
         <div class="text wow bounceInDown" data-wow-delay="300ms">
          Dean Martin,<span>CEO Acme Inc.</span> 
         </div>
        <!-- 下面小点 -->
        <div class="more">
          <span class="wow fadeInRight" data-wow-delay="100ms"></span>
          <span class="wow fadeInRight" data-wow-delay="200ms"></span>
          <span class="wow fadeInRight" data-wow-delay="300ms"></span>
        </div>
      </div>
    </div>
    <!-- 最后一页 -->
    <div class="contact" id="contact">

       <div class="container">

          <div class="title wow bounceInDown" data-wow-delay="100ms">feel free to<span> contact us</span></div>

          <div class="desc wow bounceInDown" data-wow-delay="200ms">Lorem Ipsum comes from sections 1.10.32 and
             1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero,
             written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. 
          </div> 
          <div class="box">
              <!-- 第1行 -->

              <div class="info">
                <div class="item">
                  <div class="label">Name<sup>*</sup></div>
                  <input type="text" placeholder="请输入昵称">
                </div>
                <div class="item">
                  <div class="label">Email<sup>*</sup></div>
                  <input type="email" placeholder="请输入邮箱">
                </div>                  
              </div>
              <!-- 第2行 -->

              <div class="message">
                <div class="item">
                  <div class="label">Message <sup>*</sup></div>
                  <textarea  placeholder="请输入留言内容" rows="8"></textarea>
                </div>
              </div>
              <!-- 第3行 -->
              <div class="button">
                <button type="submit">send</button>
              </div>
          </div>
       </div>
    </div>
    <!-- 最后 -->
    <footer>
      <div class="container">
        <div class="copyright">ALL RIGHTS RESERVED. COPYRIGHT © 2014 SPIRIT8</div>
        <div class="link">
            <div class="item"><img src="./assets/images/footer1.png" alt=""></div>
            <div class="item"><img src="./assets/images/footer2.png" alt=""></div>
            <div class="item"><img src="./assets/images/footer3.png" alt=""></div>
            <div class="item"><img src="./assets/images/footer4.png" alt=""></div>
            <div class="item"><img src="./assets/images/footer5.png" alt=""></div>
        </div>
      </div>
    </footer>

  </body>
</html>


<!-- 加载less -->
 <script src="./assets/js/less.min.js"></script>
<!-- jQuery -->
<script src="./assets/js/jquery.min.js"></script>
<!-- 引入boostrapJS文件 -->
<script src="./assets/js/bootstrap.min.js"></script>

<!-- wow.min.js文件 -->
<script src="./assets/js/wow.min.js"></script>
 <!-- 可以执行多次动画效果 -->
  <!-- <script src="./assets/js/wow.min.repeat.js"></script> -->
<!-- 实例化创建对象结构 -->
 <!-- data-wow-duration 执行时间 delay延迟时间 class="bounceInDown"  -->
 <script>
  new WOW({
  /* 让元素自带wow名称 */
    // boxClass:'wow'
  }).init();
 </script>
